<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册界面</title>    
<script src="https://hcb98.gitee.io/test_pages/jquery-1.8.1.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
<style type="text/css"> 
    div.panel,p.flip
    {
    font-size:20px;
    margin:0px;
    padding:5px;
    text-align:center;
    background:#e5eecc;
    border:solid 1px #c3c3c3;
    }
    div.panel
    {
    height:400px;
    display:none;
    }
    
    </style>
    	<script>
                function validateForm1(){
                    var k=document.forms["Form"]["email"].value;
                    var atpos=k.indexOf("@");
                    var dotpos=k.lastIndexOf(".");
                    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=k.length){
                        alert("不是一个有效的 e-mail 地址");
                        return false;
                
                    }
                    else{
                        alert("收到！")
                    }
                }
                </script>
                <script>
                function validateForm() {
                    var x = document.forms["myForm"]["fname"].value;
                    if (x == null || x == "") {
                        alert("快想个名字吧！");
                        return false;
                    }
                    else{
                        alert("名字不错吖！")
                    }
                }
                </script>
                
                <script>
                    function myFunction(){
                        var x,y,text;
                        x = document.getElementById("a").value;
                        y = document.getElementById("b").value;
                        if (x!=y){
                            text="两次密码不同"
                        }
                        else
                        {
                            text="密码可用"
                        }
                        document.getElementById("demo").innerHTML = text;
                    }
                </script>
</head>
<body>
    <p class="flip" style="color:blue">Please Regist</p>
    <div class="panel">
            <div class="panel-top">       
                    <div class="ceshi"><h1>注册界面</h1></div>
                    <script type="text/javascript">
                        var mingzi;
                        var mimai;
                        var shoujihao;
                        var youxiang;
                    </script>
                    <div class="panel-content">        
                    <div class="int">          
                    <form name="myForm" action="form.xlsx"
                    onsubmit="return validateForm()" method="post">
                    名字: <input id="username" type="text" name="fname" value="">
                    <input type="submit" value="提交">
                    </form>   
                    </div>        
                    <div class="int">            
                    <input id="a" type="password" placeholder="输入密码" value="">  
                    </div> 
                    <div>   
                    <input id="b" type="password" placeholder="再次输入密码" value="">
                    </div>
                    <div>
                    <button type="button" onclick="myFunction()">提交</button>     
                    <p id="demo"></p>
                    </div>
                    <div> 
                    <input id="usernumber" type="number" placeholder="手机号码">        
                    </div>             
                    <form  name="Form" action="form.xlsx" onsubmit="return validateForm1();" method="post">
                    Email: <input id="useremail" type="text" name="email">
                    <input type="submit" value="提交">
                    </form> 
                    
                    <div class="panel-footer">
                        <button onclick="save()">注册</button>
                         <!-- <button type="button" onclick="alert('恭喜您注册成功！赶快去登录，打开新世界的大门吧！')" >注册</button> -->
                        
                         <script type="text/javascript">
                             function save(){
                                 mingzi=document.getElementById("username").value;
                                 mima=document.getElementById("a").value;
                                 shoujihao=document.getElementById("usernumber").value;
                                 youxiang=document.getElementById("useremail").value;
                                 localStorage.setItem("Name",mingzi);
                                 localStorage.setItem("Password",mima);
                                 localStorage.setItem("Number",shoujihao);
                                 localStorage.setItem("Email",youxiang);
                                 localStorage.setItem("Time",new Date);
                                 alert('恭喜您注册成功！赶快去登录，打开新世界的大门吧！')
                             }
                         </script>
                    
                    
                    </div>
                    </div>
</body>